<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrapper {
            margin: 50px auto;
            width: 500px;
            height: 500px;
            border: 1px solid #ddd;
            text-align: center;
        }
        #map {
            margin: 50px auto;
            width: 300px;
            height: 200px;
            border: 1px solid #cce9f0;
            text-align: center;
            line-height: 200px;
            font-size: 68px;
            font-weight: bold;
        }
        button {
            width: 60px;
            height: 30px;
            background-color: #010000;
            color: white;
        }
        button:first-of-type {
            margin-right: 70px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="map">43</div>
        <!-- 开始 停止 -->
        <button type="button">开始</button>
        <button type="button">停止</button>
    </div>
    <script>
        // 需求： 点击开始按钮每隔一段时间就产生一个新的1~100之间的随机数，显示在map元素中，点击停止按钮就停止产生新的
        // 获取元素
        let map = document.getElementById('map');
        // 获取按钮
        let button = document.getElementsByTagName('button');
        // 定时器标识
        let flag = null;
        // 开始
        button[0].onclick = function  () {
            flag = setInterval(function () {
                map.textContent = Math.floor(Math.random() * (Math.floor(100) - Math.ceil(1) + 1) + Math.ceil(1) );
            }, 170)
        };
        // 停止
        button[1].onclick = function  () {
            clearInterval(flag);
        };
    </script>
</body>

</html>